class HeaderNav extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback () {
    this.render();
  }

  render () {
    this.shadowRoot.innerHTML = `
        <link rel="stylesheet" href="static/css/bootstrap.min.css" />
        <link rel="stylesheet" href="static/css/bootstrap-icons.css" />
        <link rel="stylesheet" href="static/css/font-awesome-pro.css" />
        <link rel="stylesheet" href="static/css/animate.css" />
        <link rel="stylesheet" href="static/css/glightbox.min.css" />
        <link rel="stylesheet" href="static/css/scrollCue.css" />
        <link rel="stylesheet" href="static/css/swiper-bundle.css" />
        <link rel="stylesheet" href="static/css/spacing.css" />
        <link rel="stylesheet" href="static/css/main.css" />
        <link rel="stylesheet" href="static/css/responsive.css" />
          <header class="header sticky-header">
              <div class="container">
                  <div class="row">
                      <div class="col-lg-2 col-md-4 col-5 align-self-center">
                          <div class="logo">
                              <a href="index.html">
                                  <img class="sticky-logo" src="static/picture/logo.png" alt="Logo">
                                  <img src="static/image/logo-3.png" width="100" height="100" alt="white-logo">
                              </a>
                          </div>
                      </div>
                      <div class="col-lg-10 col-md-8 col-7">
                          <div class="h-right-button">
                              <a class="button-1" href="contact.html">快速咨询</a>
                          </div>
                          <div class="menu">
                              <nav>
                                  <ul>
                                      <li class=""><a href="index.html">首页</a>
                                      </li>
                                      <li><a href="about.html">关于我们</a></li>
                                      <li><a href="services.html">产品介绍</a></li>
                                     <li class=""><a href="blog.html">博文</a>
                                      </li>
                                      <li><a href="contact.html">联系我们</a></li>
                                       <li class="menu-item-has-children"><a href="#">更多</a>
                                        <ul class="sub-menu">
                                              <li><a href="team.html">成员介绍</a></li>
                                              <li><a href="faq.html">常见问题</a></li>
                                              <li><a href="terms-conditions.html">法律政策</a></li>
                                              <li><a href="privacy-policy.html">隐私条款</a></li>
                                          </ul>
                                      </li>
                                  </ul>
                              </nav>
                          </div>
                      </div>
                  </div>
              </div>
          </header>
    <div class="mobile-menu-area">
      <!--offcanvas menu area start-->
      <div class="off_canvars_overlay"></div>
      <div class="offcanvas_menu">
        <div class="offcanvas_menu_wrapper">
          <div class="canvas_close">
            <a href="javascript:void(0)"><i class="bi bi-x-lg"></i></a>
          </div>
          <div class="mobile-logo">
            <a href="index.html">
              <img src="static/picture/logo.png" alt="Logo" />
            </a>
          </div>
          <div id="menu" class="text-left">
            <ul class="offcanvas_main_menu">
              <li class="menu-item-has-children">
                <a href="index.html">Home</a>
                <ul class="sub-menu">
                  <a href="index.html">首页</a>
                </ul>
              </li>
              <li><a href="about.html">关于我们</a></li>
              <li class="menu-item-has-children">
                <a href="services.html">产品介绍</a>
                <ul class="sub-menu">
                  <li><a href="services.html">Services</a></li>
                  <li><a href="services-details.html">Services Details</a></li>
                </ul>
              </li>
              <li class=""><a href="blog.html">博文</a></li>
               <li><a href="contact.html">联系我们</a></li>
              <li class="menu-item-has-children">
                <a href="#">Page</a>
                <ul class="sub-menu">
                  <li><a href="team.html">Team</a></li>
                  <li><a href="pricing-plan.html">Pricing & Plans</a></li>
                  <li><a href="pricing-plan2.html">Pricing & Plans 2</a></li>
                  <li><a href="testimonial.html">Testimonials</a></li>
                  <li><a href="faq.html">Faq</a></li>
                  <li><a href="404.html">404 Error</a></li>
                  <li>
                    <a href="terms-conditions.html">Terms & Conditions</a>
                  </li>
                  <li><a href="privacy-policy.html">Privacy Policy</a></li>
                </ul>
              </li>
              <li class="menu-item-has-children">
                <a href="blog.html">Blog</a>
                <ul class="sub-menu">
                    <li><a href="team.html">成员介绍</a></li>
                    <li><a href="faq.html">常见问题</a></li>
                    <li><a href="terms-conditions.html">法律政策</a></li>
                    <li><a href="">隐私条款</a></li>
                </ul>
              </li>
              <li><a href="contact.html">Contact Us</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
      `;
  }
}

customElements.define('header-nav', HeaderNav);